<template>
    <div class="box">
        <div class="right_table">
            <div @click="a" class="right_switch"></div>
            <div v-show="active">
                <table width="95%" height="150px" border="1">
                <tr>
                    <td>设备名称</td>
                    <td>数量/台</td>
                    <td>运行状态</td>
                    <td>OEE</td>
                </tr>
                <tr>
                    <td>设备名称</td>
                    <td>3600</td>
                    <td>运行</td>
                    <td>92.14%</td>
                </tr>
                <tr>
                    <td>设备名称</td>
                    <td>3600</td>
                    <td>运行</td>
                    <td>92.14%</td>
                </tr>
                <tr>
                    <td>设备名称</td>
                    <td>3600</td>
                    <td>运行</td>
                    <td>92.14%</td>
                </tr>
                </table>
            </div>
            <div  v-show="!active">
                <div id="left_ech1" style="width: 100%;height:230px;"></div>
            </div>
        </div>
    </div>
</template>
<script>
   export default {
        name:'middle',
        data() {
            return {
            active: false
            };
        },
        mounted() {
            this.leftbottom();
        },
        methods: {
            a() {
                this.active = !this.active;
                this.leftbottom();
            },
            leftbottom() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById("left_ech1"));
                // 绘制图表
                myChart.setOption({
                    title: {
                        text: "总线上下行数据量",
                        left: "left",
                        top: 10,
                        textStyle: {
                            color: "#4dd4f5",
                            fontSize: 14,
                            fontWeight: 400
                        }
                    },
                    textStyle: {
                        color: "white"
                    },
                    grid: {
                        left: "3%",
                        //   right: "4%",
                        bottom: "23%",
                        containLabel: true
                    },
                    legend: {
                        data: ["上行流量", "下行流量"],
                        right: 10,
                        top: 10,
                        textStyle: {
                            color: "white"
                        }
                    },
                    xAxis: {
                        type: "category",
                        boundaryGap: false,
                        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
                    },
                    yAxis: {
                        type: "value"
                    },
                    series: [
                    {
                        name: "上行流量",
                        color: ["#9d0f54"],
                        data: [20, 72, 101, 134, 290, 330, 320],
                        type: "line",
                        areaStyle: {}
                    },
                    {
                        name: "下行流量",
                        color: "#5b50cc",
                        data: [40, 102, 131, 164, 250, 350, 370],
                        type: "line",
                        areaStyle: {}
                    }
                    ]
                });
            }
        }
   };
</script>
<style scoped>
.box{
    width: 100%;
    height: 200px;
    border-radius: 10px;
    border: 1px solid #019EFF;
}
</style>